<template>
  <el-row>
    <el-row>
      <div class="addResouce">
        <span class="controlName">媒体资源</span>
        <span class="addControl" @click="addResouce">加入资源</span>
      </div>
    </el-row>
    <el-row>
      <resourceTable
        :tableData="resouceTable"
        :type="resouceTableType"
        @handleResourceChange="handleResourceChange"
        @handleResourceDelete="resourceDelete"
      ></resourceTable>
    </el-row>
    <el-row style="margin-top:20px;margin-left:30px" type="flex" justify="flex-start">
      <el-col :span="11">
        <span>状态</span>
        <el-radio v-model="status" label="1">草稿</el-radio>
        <el-radio v-model="status" label="2">提交</el-radio>
      </el-col>
    </el-row>
    <el-dialog
      title="添加资源"
      :visible.sync="addResouceShow"
      append-to-body
      destroy-on-close
      center
      width="60%"
    >
      <add-resource-box ref="boxChild" :addType="addType"></add-resource-box>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addResouceShow = false">取 消</el-button>
        <el-button type="primary" @click="resourceSave">加 入</el-button>
      </span>
    </el-dialog>
  </el-row>
</template>

<script>
import generateUUID from "../../add_contract/components/uuid.js";
import resourceTable from "../../add_contract/components/resourceTable.vue";
import addResourceBox from "../../add_contract/components/addResourceBox.vue";
export default {
  components: {
    resourceTable,
    addResourceBox
  },
  data() {
    return {
      resouceTableType: 1,
      resouceTable: [],
      addResouceShow: false,
      addType: null,
      status:'1'
    };
  },
  methods: {
    addResouce() {
      this.addType = null;
      this.addResouceShow = true;
    },
    handleResourceChange(data) {
      this.addType = { ...data };
      this.addResouceShow = true;
    },
    resourceDelete(data) {
      let arr = [data.id];
      let allArr = [...this.resouceTable];
      let finalArr = allArr.filter(item => !arr.includes(item.id));
      this.resouceTable = finalArr;
    },
    resourceSave() {
      if (this.$refs.boxChild.get_resources.expenses == "") {
        this.$message.error("输入费用");
      } else if (this.$refs.boxChild.get_resources.id == "") {
        this.$message.error("请选择资源");
      } else if (this.$refs.boxChild.get_resources.often == "") {
        this.$message.error("请选择时间");
      } else {
        let index = "";
        if (this.resouceTable.length == 0) {
          this.$refs.boxChild.get_resources.fakeID = generateUUID();
          this.resouceTable.push(this.$refs.boxChild.get_resources);
        } else {
          if (this.$refs.boxChild.get_resources.fakeID) {
            let index = "";
            this.resouceTable.forEach((p, i) => {
              if (p.fakeID == this.$refs.boxChild.get_resources.fakeID) {
                this.$set(
                  this.resouceTable,
                  i,
                  this.$refs.boxChild.get_resources
                );
              }
            });
          } else {
            this.$refs.boxChild.get_resources.fakeID = generateUUID();
            this.resouceTable.push(this.$refs.boxChild.get_resources);
            
          }
        }
        this.addResouceShow = false;
      }
    }
  },
  watch:{
    status(newVal,oldVal){
      this.$emit('statusChange',newVal)
    },
    resouceTable(newVal,oldVal){
      this.$emit('changeResource',newVal)
    }
  }
};
</script>

<style scoped='scoped'>
.main {
  width: 100%;
  height: 100%;
}
.addResouce {
  width: 100%;
  margin: 20px 20px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  margin-left: 30px;
  font-size: 14px;
}
.addControl {
  margin-left: 20px;
  color: #169bd5;
  cursor: pointer;
}
</style>